<template>
  <div class="goodsinfo-box">
    
    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                
                <goodsswipe :imgData='swipelist'></goodsswipe>
            </div>
        </div>
	</div>

    <div class="mui-card">
		<div class="mui-card-header">{{goodsinfo.title}}</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p class="price">
                    市场价: <del>￥{{goodsinfo.market_price}}</del>  &nbsp; &nbsp; &nbsp; 
                    销售价: ￥<span class="now-price">{{goodsinfo.sell_price}}</span>
                </p>
                <p style="display:flex;height:30px;line-height:30px;">
                    <!-- numchange  子组件广播过来的数据  numf函数来接收 -->
                    购买数量:&nbsp; &nbsp; <numinfo  v-on:numchange="numf" :maxvalue="goodsinfo.stock_quantity"></numinfo>
                </p>
                <p>
                     <mt-button type="primary" size="small">立即购买</mt-button>
                     <mt-button type="danger" size="small" @click="addCar">加入购物车</mt-button>
                </p>
            </div>
        </div>
	</div>

     <div class="mui-card">
		<div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>商品货号:{{goodsinfo.goods_no}}</p>
                <p>库存情况:{{goodsinfo.stock_quantity}}</p>
                <p>上架时间:{{goodsinfo.add_time | timeFilter}}</p>
            </div>
            <div class="mui-card-footer">
				 <mt-button type="primary" size="large" plain @click="goodsdesc(goodsinfo.id)">图文介绍</mt-button>
                 <mt-button type="danger" size="large" plain @click="tosubcommment(goodsinfo.id)">商品评论</mt-button>
			</div>
        </div>
	</div>

    <!-- 小球 -->
    <transition v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="ball" v-show="ballFlag" ref="ball" > 
        </div>
    </transition>

  </div>
</template>
<script>
import goodsswipe from '../subcomment/swipe.vue';
import numinfo from '../subcomment/numbox.vue'
export default {
  data() {
    return {
        goodsinfo:{},  //商品信息
        id:this.$route.params.id,
        swipelist:[], //轮播图图片
        ballFlag:false,
        selectedCount:1 //用户选中的商品的数量
    };
  },
  components:{
      goodsswipe,
      numinfo
  },
  created(){
      this.getlistinfo();
      this.lunbotu()
  },
  methods:{
    //   商品信息
      getlistinfo(){
          this.$http.get('api/goods/getinfo/'+ this.id).then((res)=>{
            //   console.log(res.body);
              if(res.body.status === 0){
                  this.goodsinfo = res.body.message[0];
              }
          })
      },

    // 轮播图信息
    lunbotu(){
        this.$http.get('api/getthumimages/'+this.id).then((res)=>{
            // console.log(res.body)
            if(res.body.status===0){
                this.swipelist=res.body.message;
            }
        })
    },
    goodsdesc(id){
         this.$router.push({ name:'goodsdesc',params:{id}})
    },
    // 切换到评论列表的路由
    tosubcommment(id){
        this.$router.push({ name:'goodssubcomment',params:{id}})
    },
    // 拿到子组件传递过来的数量文本框内的值
    numf(info){
        // console.log('父组件接收到子组件'+info);
        this.selectedCount = info;
    },
    // 点击添加购物车  
    addCar(){
        this.ballFlag = !this.ballFlag;

        // 点击加入购物车传递给vuex数据
        var carinfo = {
            id:this.id,
            count:this.selectedCount,
            price:this.goodsinfo.sell_price,
            selected:true
        }
        // 提交vuex中的addCar方法把数据传递过去
        this.$store.commit('addCar',carinfo);
    },


    // 小球钩子函数
    afterEnter(el){//动画结束后的函数  小球消失
        this.ballFlag = !this.ballFlag;
    },
    enter(el,done){ //小球移动的目的地
        el.offsetWidth;
        // 问题：当滚动条滚动的时候，小球的位置不能正好落在购物车的徽标上去
        //       因为小球的最终位置被写死了，已经局限在了小球在某一分辨率下的滚动条未滚动的情况下
        // 分析：动态计算这个坐标值
        // 解决方法：
        //        获取小球的相对于当前视口的横纵坐标  获取徽标的横纵坐标   利用徽标之间的值差

        // 获取小球在页面中的位置
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        // 获取徽标在页面中的位置
        const badgePosition = document.getElementById("badge")
                .getBoundingClientRect();
        // 获取两者之间的差        
        const left =   badgePosition.left - ballPosition.left;
        const top =     badgePosition.top - ballPosition.top;  
        // console.log(left,top); 
        el.style.transform = `translate(${left}px,${top}px)`;
        el.style.transition = "all 0.5s ease";
        

        done();//调用done相当于调用了afterEnter函数
    },
    beforeEnter(el){ //开始之前小球从哪里开始运动
        el.style.transform="translate(0,0)";
    }
  }
};
</script>
<style lang="scss" scoped>
.goodsinfo-box {
    background-color: #eee;
    overflow: hidden;
    // min-height: 500px;
    position: relative;

    .price{
        .now-price{
            color: red;
            font-weight: 700;
        }
    }
    .mui-card-content-inner{
        p{
            font-size: 16px;
        }
       
    }

    // 小球
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        top: 366px;
        left: 158px;
    }
}
.mui-card-footer{
    // 因为父盒子用了flex流式布局  想要让其上下排列
    display: block;
    button {
        margin: 15px 0;
    }
}
</style>